//1-加载左边的echarts图表
function initLeftChart(year,chartTitle,YCityNames,XDataValues,unit){
  var myChart = echarts.init(document.getElementById('leftChart'));
  var option = {
    color:['#91C7AE'],
    title: {
      text: chartTitle,
      subtext: '数据来自统计年鉴',
      textStyle:{
        fontSize:14
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: '{a} : <br>{c0}'+unit
    },
    legend: {
      data: [year.toString()+'年']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.2]
    },
    yAxis: {
      type: 'category',
      data: YCityNames,
      nameTextStyle:{
        fontWeight:'bold'
      }
    },
    series: [{
        name: year.toString()+"年",
        type: 'bar',
        data: XDataValues
      }
    ]
  };
  myChart.setOption(option);
}


//2-加载右边的echarts图表
//（1）综合水平指标
function initRightChart_CompScore(dataSet1,dataSet2,year){
    var myChart = echarts.init(document.getElementById('rightChart'));
    myChart.dispose();
    myChart = echarts.init(document.getElementById('rightChart'));
    //创建显示模板
    var schema = [
        {name: 'lng', index: 0, text: '经纬度'},
        {name: 'cityName', index: 1, text: '城市名'},
        {name: 'totalScore', index: 2, text: '得 &nbsp;&nbsp;分'}
    ];

    var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.2)'
    };
    
    let option = {
        backgroundColor: '#404a59',
        color: [
            '#fec42c', '#80F1BE'
        ],
        legend: {
            top: 10,
            data: ['中原城市群', '山东半岛城市群'],
            textStyle: {
                color: '#fff',
                fontSize: 16
            }
        },
        grid: {
            left: '10%',
            //right: 100,
            top: '18%',
            bottom: '10%'
        },
        tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderWidth: 1,
            formatter: function (obj) {
                // console.log(obj)
                var value = obj.value;
                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 10px;padding-bottom: 7px;margin-bottom: 7px">'
                    + obj.seriesName + '-'+ year + '年<br>' 
                    + schema[1].text + ':' +value[3]+'<br>'
                    + schema[0].text + '：( ' + value[0] + ',' + value[1] + ' )<br>'
                    + schema[2].text + '：' + value[2] + '<br>';
            }
        },
        xAxis: {
            type: 'value',
            name: '经度/°',
            nameGap: 16,
            nameTextStyle: {
                color: '#fff',
                fontSize: 14
            },
            min: 110,
            max: 122,
            splitNumber:12,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            axisLabel: {
                interval: 0,
                formatter: function(value) {
                    return value;
                }
            },
        },
        yAxis: {
            type: 'value',
            name: '纬度/°',
            min: 32,
            max: 38,
            splitNumber:12,
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
                color: '#fff',
                fontSize: 16
            },
            axisLine: {
                lineStyle: {
                    color: '#eee'
                }
            },
            splitLine: {
                show: false
            }
        },
        visualMap: [
            {
                left: 'right',
                top: '5%',
                dimension: 2,
                min: 0,
                max: 10,
                itemWidth: 12,
                itemHeight: 100,
                calculable: true,
                precision: 0.1,
                text: ['Score'],
                textGap: 20,
                textStyle: {
                    color: '#fff'
                },
                inRange: {
                    symbolSize: [10, 70]
                },
                outOfRange: {
                    symbolSize: [10, 70],
                    color: ['rgba(255,255,255,.2)']
                },
                controller: {
                    inRange: {
                        color: ['#c23531']
                    },
                    outOfRange: {
                        color: ['#444']
                    }
                }
            }
        ],
        series: [
            {
                name: '中原城市群',
                type: 'scatter',
                itemStyle: itemStyle,
                data: dataSet1
            },
            {
                name: '山东半岛城市群',
                type: 'scatter',
                itemStyle: itemStyle,
                data: dataSet2
            }
        ]
    };
    //为图标添加option
    myChart.setOption(option);
}

//（2）产业占比计算结果
function initRightChart(builderJson1,builderJson2,chartTitle,legendObj){
  var myChart = echarts.init(document.getElementById('rightChart'));
  myChart.dispose();
  myChart = echarts.init(document.getElementById('rightChart'));
    var option = {
        title: {
        text: chartTitle,
        left: 'center',
        top: 20,
        subtext: ['图上-中原城市群','图下-山东半岛城市群']
    },
    legend: legendObj,
    tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
    },

    visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: 
    {
    color: ['#43CD80', '#fec42c', '#9A32CD'],
    symbolSize: [30, 100]
    }

    },
    series: [
        {
            name: '产业占比',
            type: 'pie',
            radius: '65%',
            width:['100%'],
            center: ['50%', '30%'],
            data: builderJson1.sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
        
            labelLine: {
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        },
        {
            name: '产业占比',
            type: 'pie',
            radius: '72%',
            width:['100%'],
            center: ['50%', '75%'],
            data: builderJson2.sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',

            labelLine: {
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }

        }
    ]
    };
    myChart.setOption(option);
}